﻿@using Kugar.UI.RazorUI.RazorEngine


<!DOCTYPE html>

<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="/Views/styles/font-awesome.min.css" rel="stylesheet" />
    <link href="/Views/styles/app.css" rel="stylesheet" />
    <script src="/Views/scripts/jquery-2.2.3.js"></script>
    @*<script src="http://res.razorui.local/Resources/razorui.js"></script>*@

    @RenderSection("styles",false)
</head>
<body>
    <div class="demo-app">
        <header>
            <div>
                <h2 class="app-title">
                    NanUI BorderlessForm Demo
                </h2>
            </div>
            <div></div>
        </header>
        <content>
            <div class="app-sys-command-container">
                <ul class="sys-commands">
                    <!--Use <n-ui-command> attribute to control form's system commands. -->
                    <li n-ui-command="minimize">
                        <i class="fa fa-window-minimize"></i>
                    </li>
                    <!--Use <n-ui-command> attribute to control form's system commands. -->
                    <li n-ui-command="maximize">
                        <i class="fa fa-window-maximize"></i>
                    </li>
                    <!--Use <n-ui-command> attribute to control form's system commands. -->
                    <li n-ui-command="close">
                        <i class="fa fa-close"></i>
                    </li>
                </ul>
            </div>

        @RenderBody()
        </content>
    </div>
    
@RenderSection("script",false)

<script>
		function refreshIframe() {
			var frame = $("iframe")[0];
			frame.src = frame.src;
		}

		$(function () {

			$(window).on("hoststatechange", function (e) {
                console.log("hoststatechange");
				$("#label-form-state").text(e.detail.stateName);

			});

			$(window).on("hostactivestate", function (e) {
                console.log("hostactivestate");
				$("#label-activated-state").text(e.detail.stateName);

				if (e.detail) {
					if (e.detail.state === 1) {
						$("html").addClass("app-active");
					}
					else {
						$("html").removeClass("app-active");
					}
				}
			});

			$(window).on("hostsizechange", function (e) {
                console.log(`hostsizechange:width:${e.detail.width} height:${e.detail.height}`);
				$("#label-size-state").text(`width:${e.detail.width} height:${e.detail.height}`);

			});

		});
    </script>
</body>
</html>